<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
        <p>{{persons}}</p>
        <button @click="persons[0].name='bob'">更新</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>

    const defaultPersons = [
        {id:1,name:'tom'},
        {id:2,name:'jack'}
    ]

    const localPersons = JSON.parse(localStorage.getItem('persons_key'))

    new Vue({
      el: "#test",
      data: {
        persons: localPersons || defaultPersons
      },
      watch:{
        persons:{
            handler(value){
                localStorage.setItem('persons_key',JSON.stringify(this.persons))
            },
            deep:true,
            immediate:true
        }
      }
    })
  </script>
</body>
</html>